<template>
    <div class="silk-road-hot-data-card" @click="viewDetails(cardData.id)">
        <div class="ellipsis silk-road-card--title">{{ cardData.title }}</div>
        <div class="silk-road-card--content">{{ cardData.content }}</div>
        <div class="silk-road-card--info">
            <span class="fl field">{{ cardData.domain }}</span>
            <span class="fl country">{{ cardData.country }}</span>
            <span class="fr time">{{ cardData.time }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SilkRoadHotDataCard",
        props: {
            cardData: {
                type: Object,
                required: true,
                default: function() {
                    return {
                        id: 0,
                        title: "---",
                        content: "---",
                        domain: "--",
                        country: "--",
                        time: "-年-月-日"
                    }
                }
            }
        },
        data() {
            return {}
        },
        methods: {
            viewDetails(id) {
                console.log(id)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .silk-road-hot-data-card {
        .silk-road-card--title {
            width: 80%;
        }
        .silk-road-card--content {
            white-space: nowrap;
            overflow: hidden;
        }
        .silk-road-card--info {
            overflow: hidden;
        }
    }
</style>
